<template>
  <div>
    <a-modal v-model:visible="pageData.visible" width="60%" :title="pageData.title" :destroyOnClose="true" @ok="clickModalOk" @cancel="handleModalCancel">
      <a-form ref="queryFormRef" name="queryForm" :model="queryForm.data" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14 }">
        <a-row :gutter="24">
          <a-col span="8">
            <a-form-item name="tableName" label="表名称">
              <a-input v-model:value="queryForm.data.tableName"></a-input>
            </a-form-item>
          </a-col>
          <a-col span="8">
            <a-form-item name="tableComment" label="表描述">
              <a-input v-model:value="queryForm.data.tableComment"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" style="text-align: right">
            <a-button type="primary" @click="tablePage.reload()"> <AutoeeIcon icon="SearchOutlined" />查询 </a-button>
            <a-button @click="resetQueryForm()"><AutoeeIcon icon="redo-outlined" />重置</a-button>
          </a-col>
        </a-row>
      </a-form>
      <!-- tableLayout设为 fixed 表示内容不会影响列的布局 	- | 'auto' | 'fixed' -->
      <a-table
        rowKey="tableName"
        :columns="tableData.columns"
        :data-source="tableData.dataSource"
        :loading="tablePage.loading.value"
        :pagination="tablePagination"
        @change="tableHandChangePage"
        :row-selection="{ selectedRowKeys: tableData.selectedRowKeys, onChange: onTableSelectChange }"
        bordered
        size="small"
        tableLayout="fixed"
      >
        <template #bodyCell="{ index, column, record }">
          <template v-if="column.key === 'pageIndex'">
            {{ index + 1 }}
          </template>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script setup>
import { listDbTable, importTable } from '@/api/tool/gen';
import { reactive, ref, computed } from 'vue';
import AutoeeUtil from '@/utils/AutoeeUtil.js';
import { AutoeeIcon } from '@/utils/AutoeeIcon.js';

// 当前页面使用的数据
const pageData = reactive({
  title: '导入表',
  visible: false,
  operateType: '',
  sexDict: [],
  deptTreeData: [],
  statusDict: [],
  postDict: [],
  roleDict: [],
});
AutoeeUtil.getDictsByType('sys_user_sex').then((res) => {
  pageData.sexDict = res;
});
AutoeeUtil.getDeptTreeData().then((res) => {
  pageData.deptTreeData = res.data;
});
AutoeeUtil.getDictsByType('sys_normal_disable').then((res) => {
  pageData.statusDict = res;
});

// 查询Form
const queryFormRef = ref();
const queryForm = reactive({ data: { params: {} } });

// 重置查询Form
const resetQueryForm = () => {
  AutoeeUtil.resetFormFieldsToEmpty(queryForm.data);
  tablePage.reload();
};

// 用户列表数据
const tableData = reactive({
  // 列表数据
  dataSource: [],
  // 列表记录数
  total: 0,
  selectedRowKeys: [],
  // 列表列定义
  columns: [
    {
      title: '序号',
      dataIndex: 'pageIndex',
      key: 'pageIndex',
      width: 50,
      align: 'center',
    },
    {
      title: '表名称',
      dataIndex: 'tableName',
      key: 'tableName',
    },
    {
      title: '表描述',
      dataIndex: 'tableComment',
      key: 'tableComment',
    },

    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
    },
  ],
});

// 列表选中方法
const onTableSelectChange = (selectedRowKeys) => {
  tableData.selectedRowKeys = selectedRowKeys;
};

// 查询列表
const queryDataList = () => {
  return listDbTable(queryForm.data);
};

// 用户列表翻页数据：使用vue-request中分页方法，返回参数包含{ run, reload, loading, current, pageSize }
const tablePage = AutoeeUtil.usePagination(queryDataList, tableData);

// 用户列表翻页工具条：必须通过计算函数每次重新生成
const tablePagination = computed(() => AutoeeUtil.getTablePagination(tablePage));

// 手动翻页方法
const tableHandChangePage = (page, filters, sorter) => {
  AutoeeUtil.tableHandChangePage(tablePage, page, filters, sorter);
};

let fatherTablePage;
// 打开窗口
const openModal = (pFatherTablePage) => {
  resetQueryForm();
  pageData.visible = true;
  fatherTablePage = pFatherTablePage;
};

// 引入父页面方法
// const fatherEmit = defineEmits(['tableReload']);
// 点击窗口确认
const clickModalOk = (e) => {
  const tableNames = tableData.selectedRowKeys.join(',');
  if (tableNames == '') {
    AutoeeUtil.messageWarn('请选择要导入的表！');
    return;
  }
  importTable({ tables: tableNames }).then((res) => {
    AutoeeUtil.messageSuccess('导入表操作成功。');
    if (res.code === 200) {
      pageData.visible = false;
      resetQueryForm();
      // fatherEmit('tableReload', '');
      fatherTablePage.reload();
    }
  });
};

// 点击窗口取消
const handleModalCancel = () => {};

// 对外暴露出去
defineExpose({
  openModal,
});
</script>

<style lang="less"></style>
